<template>

    <el-container>
        <el-header id="manageHeader" height="100px">
<el-form :inline="true" 
     style="margin-top: 2%;float: left;" > 
     <el-form-item label="统计项目">
              <el-select v-model="value" placeholder="请选择" >
                <el-option  v-for="item in options3"  :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              </el-form-item>
     <!-- 学院和部门二选一 -->
                    <el-form-item label="学院">
                    <el-select v-model="value1" style="width:100px" placeholder="请选择" :disabled="value2==''?false:true">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="value2" style="width:90px" placeholder="请选择" :disabled="value1==''?false:true">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="所属年份">
                  <el-date-picker v-model="value4" type="year" placeholder="选择年"
                  :disabled="value1=='2'?false:true" 
                  value-format="yyyy">
                  </el-date-picker>
                  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="changeValue" style="margin-left:20px">查询</el-button>
</el-form-item>
</el-form>
        </el-header>
        <el-main style="background-color:white;margin-top: 20px;">
      <!-- 年度考核 -->
      <div style="margin-left: 150px;">
     <div  class="echart" id="mychart1" :style="{ float: 'left', width: '100%', height: '520px' }">
      </div></div>
    </el-main>
    </el-container>
</template>

<script>
import axios from "axios";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,PieChart,LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
   ToolboxComponent,
     MarkPointComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
   ToolboxComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LegendComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
    MarkPointComponent
]);

export default {
    name: 'Leaderinfo',
    data() {
        return {
              // 学院下拉框
            options1: [{
                value: '计算机学院',
                label: '计算机学院'
            }, {
                value: '外国语学院',
                label: '外国语学院'
            }, {
                value: '软件学院',
                label: '软件学院'
                }, {
                    value: '',
                    label: '无'
                }],
            value1: '',
            // 部门下拉框
            options2: [{
                value: '教务处',
                label: '教务处'
            }, {
                value: '研究生处',
                label: '研究生处'
            }, {
                value: '教师工作部',
                label: '教师工作部'
                }, {
                    value: '',
                    label: '无'
                }],
            value2: '',
            // 图标的转换选择
           options3: [{
        value: '1',
        label: '年度考核'
      }, {
        value: '2',
        label: '获奖级别'
      }, {
        value: '3',
        label: '材料总数'
      },
      {
        value: '4',
        label: '教师情况'
      }],
      value:'',
      value3:'1',
          value4:''
        }

    },
    mounted() {
        this.initEcharts1();
    },
    methods: {
       
       changeValue(){
      this.value3=this.value;
      if(this.value3=='2'){
        this.initEcharts2();
      }else if(this.value3=='1'){
        this.initEcharts1();
      }else if(this.value3=='3'){
        this.initEcharts3();
      }else if(this.value3=='4'){
        this.initEcharts4();
      }
    },
       // 年度考核情况
     initEcharts1() {
    const myChart = echarts.init(document.getElementById("mychart1"));
    myChart.clear();
    axios({
      method: "get",
      url: "http://localhost:8888/lead_Infomation/getExamine?academyName="+this.value1+"&departmentName="+this.value2
    }).then((resp) => {// 图标初始化
    myChart.setOption({
  title: {
    text: '各年度考核合格人数',
  },
  tooltip: {
    trigger: 'axis'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  legend:{},
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
  },
  yAxis: {
    type: 'value',
    
  },
  series: [
    {
      type: 'line',
      data: resp.data.data,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
     
    },
  ]
    });
    })
    },
    // 获奖总数
     initEcharts2() {
      
    const myChart = echarts.init(document.getElementById("mychart1"));
    myChart.clear();
    axios({
      method: "get",
      url: "http://localhost:8888/lead_Infomation/getAward?academyName="+this.value1+"&departmentName="+this.value2+"&year="+this.value4
    }).then((resp) => {// 图标初始化
    if(resp.data.data == ''){
       this.$message({
            message: this.value4+'年无数据，请重新选择',
            type: 'error'
          });
    }else{
    myChart.setOption({
      title: {
    text: '各赛事获奖情况',
    subtext: '计算机学院',
    left: 'center'
  }, toolbox: {
    feature: {
      dataView: { readOnly: false },
      saveAsImage: {}
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    left: '10%',
    top: '10%',
     orient: "vertical"
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:resp.data.data
    }
  ]

    });
    }
    })
    
    },
    // 材料总数
  initEcharts3() {
    const myChart = echarts.init(document.getElementById("mychart1"));
      myChart.clear();
    axios({
      method: "get",
      url: "http://localhost:8888/lead_Infomation/getBar?academyName="+this.value1+"&departmentName="+this.value2+"&year="+this.value4
    }).then((resp) => {// 图标初始化
    myChart.setOption({
      title: {
        text: "各项材料数目统计"
      },
      toolbox: {
    feature: {
      dataView: { readOnly: false },
      saveAsImage: {}
    }
  },
   tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
      xAxis: {
        data: ["专利数", "著作数", "科研项目数", "论文数" ]
      },
      yAxis: {},
      series: [
        {
         
             showBackground: true,
            
          type: "bar", //类型为柱状图
          data:resp.data.data
        }
      ]
    });
    })
    },
    //某个学院或者部门下面的职称人数，或者全部
    initEcharts4(){
      const myChart = echarts.init(document.getElementById("mychart1"));
      // 图标初始化
        myChart.clear();
      axios({
        method:"get",
        url: "http://localhost:8888/lead_Infomation/getPie?academyName=" +this.value1+"&departmentName="+this.value2
      }).then((resp)=>{
        myChart.setOption({
          legend: {
            // 图例
            data: resp.data.data,
            left: "20%",
            top: "20%",
            orient: "vertical"
          },
           tooltip: {
    trigger: 'item'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      saveAsImage: {}
    }
  },
          title: {
            // 设置饼图标题，位置设为顶部居中
            text: "学院职称人数统计",
            top: "10%",
            left: "center",
             textStyle:{
           fontSize:30}
             
          },
          series: [
            {
              type: "pie",
              label: {
                show: true,
                formatter: " {c} 个"
              },
              top: "20%",
              radius: "80%", //饼图半径
              data: resp.data.data
            }
          ]

        });
      })
     
     
    },
    },
}


</script>

<style>
</style>